<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10 - 动画transition </title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        p {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .fade-enter-active, .fade-leave-active {
            transition: all 3s ease;
        }

        .fade-enter-active {
            opacity: 1;
            width: 300px;
            height: 300px;
        }

        .fade-leave-active {
            opacity: 0;
            width: 50px;
            height: 50px;
        }

        /* .fade-enter需要放在.fade-enter-active的后面 */
        .fade-enter {
            opacity: 0;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="flag=!flag">点我</button>

    <transition name="fade"
                @before-enter="beforeEnteraaaaa"
                @enter="enteraaaaa"
                @after-enter="afterEnteraaa"
                @before-leave="beforeLeaveaaa"
                @leave="leaveaaaaa"
                @after-leave="afterLeaveaaaa"
    >

        <p v-show="flag">受影响的元素</p>
    </transition>

</div>
<script>


    let vm = new Vue({
        el: "#app",
        data() {
            return {
                flag: false
            }
        },
        methods: {
            beforeEnteraaaaa(el) {
                console.log("=====start=====");
                console.log("beforeEnter 动画进入前")
            },
            enteraaaaa() {
                console.log("enter 动画进入")
            },
            afterEnteraaa(el) {
                console.log("afterEnter 动画进入后");
                el.style.background = "gold";
            },
            beforeLeaveaaa() {
                console.log('------------------ ----------------------');
                console.log("beforeLeave 动画即将离开之前")
            },
            leaveaaaaa() {
                console.log('leave 动画离开');
            },
            afterLeaveaaaa(el) {
                console.log("afterLeave 动画离开之后");
                el.style.background = 'red';
                console.log("====end====")
            }
        },

    });


</script>
</body>
</html>